<template>
  <div id="homechart1">
    <div ref="chart"></div>
  </div>
</template>
  
  <script>
import eventBus from "@/utils/eventBus";
export default {
  data() {
    return {
      courseId: null,
      classId: null,
      chartDom: null,
      myChart: null,
      indicator: [],
      data: [],
      strTooltip: "",
    };
  },
  mounted() {
    this.courseId = localStorage.getItem("courseId");
    this.classId = localStorage.getItem("classId");
    this.getIndicator();
    // 监听班级变更事件
    eventBus.on("classChanged", this.handleClassChanged);
  },
  beforeUnmount() {
    // 清理事件监听器
    eventBus.off("classChanged", this.handleClassChanged);
  },
  methods: {
    handleClassChanged(newClassId) {
      this.classId = newClassId;
      this.getData();
    },
    initChartRadar() {
      // 确保数据格式正确
      let data = Array.isArray(this.data) ? this.data : [];
      let indicator = Array.isArray(this.indicator) ? this.indicator : [];

      // 如果没有数据或指标，不渲染图表
      if (indicator.length === 0) {
        return;
      }

      const self = this;
      const option = {
        radar: {
          center: ["50%", "50%"],
          radius: "75%",
          name: {
            formatter: function (name, indicator) {
              let arr;
              //   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
              //         arr = [
              //         '{a|'+name+'}{b|'+indicator.value+'万}'
              //     ]
              //   }else{
              arr = ["{a|" + name + "}"];
              //   }

              return arr.join("\n");
            },
            textStyle: {
              rich: {
                //根据文字的组设置格式
                a: {
                  color: "#3F68CF",
                  fontSize: 14,
                  fontWeight: 400,
                  fontFamily: "Source Han Sans CN",
                },
                // b:{
                //     fontSize:14,
                //     verticalAlign:'top',
                //     width:57,
                //     color:'#8E88FE',
                //     fontWeight:60,
                //     align:'center'
                // },
              },
            },
          },
          nameGap: 0,
          indicator: indicator,
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        tooltip: {
          formatter: function (params) {
            return self.strTooltip;
          },
        },
        series: [
          {
            type: "radar",
            data: data.length > 0 ? [data] : [],
            label: {
              show: true,
              formatter: function (params) {
                return params.value + "分";
              },
              color: "#2149ad",
              align: "right",
              distance: 10,
              align: "right",
            },
            symbolSize: [3, 3],
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              borderWidth: 1,
              color: "#fff",
              borderColor: "#F2F063",
            },
            areaStyle: {
              color: "#7D77F1",
              opacity: 0.6,
            },
          },
          {
            type: "radar",
            data: [[100, 100, 100, 100, 100, 100]],
            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#4175F5",
            },

            areaStyle: {
              color: "#4175F5",
              opacity: 0.06,
            },
          },
          {
            type: "radar",
            data: [[90, 90, 90, 90, 90, 90]],

            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#2C72C8",
            },

            areaStyle: {
              color: "#2C72C8",
              opacity: 0.12,
            },
          },
          {
            type: "radar",
            data: [[80, 80, 80, 80, 80, 80]],

            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#4175F5",
            },

            areaStyle: {
              color: "#4175F5",
              opacity: 0.18,
            },
          },
          {
            type: "radar",
            data: [[70, 70, 70, 70, 70, 70]],

            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#4175F5",
            },

            areaStyle: {
              color: "#4175F5",
              opacity: 0.19,
            },
          },
          {
            type: "radar",
            data: [[60, 60, 60, 60, 60, 60]],

            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#4175F5",
            },

            areaStyle: {
              color: "#4175F5",
              opacity: 0.17,
            },
          },
          {
            type: "radar",
            data: [[50, 50, 50, 50, 50, 50]],
            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#4175F5",
            },

            areaStyle: {
              color: "#4175F5",
              opacity: 0.16,
            },
          },
          {
            type: "radar",
            data: [[40, 40, 40, 40, 40, 40]],

            symbol: "none",
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: "#4175F5",
            },

            areaStyle: {
              color: "#4175F5",
              opacity: 0.13,
            },
          },
        ],
      };

      this.myChart.setOption(option);
      // // 绑定点击事件
      // this.myChart.on("click", (params) => {
      //   // console.log(12345);
      //   this.$router.push("/zhishi");
      //   // if (params.componentType === "radar" && params.name) {
      //   //   console.log(123); // 点击文字时输出 123
      //   // }
      // });
    },
    getData() {
      const url = `/tes/dify/radar?courseId=${this.courseId}&classId=${this.classId}`;
      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          // 确保数据是数组格式
          this.data = Array.isArray(res.data) ? res.data : [];

          // 确保 indicator 也是数组格式
          if (!Array.isArray(this.indicator)) {
            this.indicator = [];
          }

          this.strTooltip = this.indicator
            .map((item, index) => `${item.name}:${this.data[index] || 0}分`)
            .join("<br/>");
          this.initChartRadar();
        })
        .catch((error) => {
          console.error("获取雷达图数据失败:", error);
          // 设置默认数据避免错误
          this.data = [];
          this.strTooltip = "";
        })
        .finally(() => {
          if (this.myChart) {
            this.myChart.hideLoading();
          }
        });
    },
    getIndicator() {
      this.chartDom = this.$refs.chart;
      this.myChart = this.$echarts.init(this.chartDom);
      const url = `/tes/course/${this.courseId}/course-sort`;
      this.myChart.showLoading({
        text: "正在加载数据...",
        color: "#4cbbff",
        maskColor: "rgba(255, 255, 255, 0.8)",
        zlevel: 0,
      });
      this.$axios
        .get(url)
        .then((response) => {
          const res = response;
          // 确保 indicator 数据是数组格式
          this.indicator = Array.isArray(res.data) ? res.data : [];
          this.getData();
        })
        .catch((error) => {
          console.error("获取雷达图指标失败:", error);
          // 设置默认指标避免错误
          this.indicator = [];
        })
        .finally(() => {
          if (this.myChart) {
            this.myChart.hideLoading();
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#homechart1 {
  > div {
    width: 100%;
    height: 300px;
  }
}
</style>